TypeScript Enum Alternatiivid: Const Assertionite ja Union Type'ide Kasutamine Robustse Koodi Loomiseks

TypeScript, JavaScripti võimas supersett, toob staatilise tüübikindluse dünaamilisse veebiarenduse maailma. Oma paljude funktsioonide hulgas on enum märksõna olnud pikka aega nimetatud konstantide kogumi määratlemiseks. Enum-id pakuvad selget viisi fikseeritud seotud väärtuste kogumi esitamiseks, parandades loetavust ja tüübikindlust.

Kuid TypeScripti ökosüsteemi küpsedes ning projektide keerukuse ja ulatuse kasvades seab globaalselt arendajate seas üha enam küsimärgi alla enum-ite traditsioonilise kasulikkuse. Kuigi lihtsate juhtumite puhul on need arusaadavad, tutvustavad enum-id teatud käitumisviise ja käitusaegseid omadusi, mis võivad mõnikord põhjustada ootamatuid probleeme, mõjutada paketi suurust või keerustada tree-shaking optimisaatoreid. See on viinud alternatiivide laialdase uurimiseni.

See põhjalik juhend süveneb sügavuti kahesse silmapaistvasse ja väga tõhusasse alternatiivi TypeScripti enum-itele: Union Type'id koos Stringi/Numbriga Literalsiga ja Const Assertionid (as const). Uurime nende mehhanisme, praktilisi rakendusi, eeliseid ja kompromisse, pakkudes teile teadmisi, et teha teadlikke disainivalikuid oma projektide jaoks, olenemata nende suurusest või nende kallal töötavast globaalsest meeskonnast. Meie eesmärk on anda teile võimalus kirjutada robustsemat, hooldatavamat ja tõhusamat TypeScripti koodi.

TypeScripti Enum: Kiire Kordamine

Enne kui sukeldume alternatiividesse, vaatame lühidalt traditsioonilist TypeScripti enum. Enum-id võimaldavad arendajatel määratleda nimetatud konstantide kogumi, muutes koodi loetavamaks ja vältides "maagiliste stringide" või "maagiliste numbrite" hajutamist kogu rakenduses. Need esinevad kahes peamises vormis: numbrilised ja string-enumid.

Numbrilised Enum-id

Vaikimisi on TypeScripti enum-id numbrilised. Esimene liige initialiseeritakse väärtusega 0 ja iga järgnev liige suureneb automaatselt.

            enum Direction {
  Up,
  Down,
  Left,
  Right,
}

let currentDirection: Direction = Direction.Up;
console.log(currentDirection); // Väljund: 0
console.log(Direction.Left);    // Väljund: 2

            

              
                Copy
              
            
          

Võite ka numbrilisi enum-liikmeid käsitsi initialiseerida:

            enum StatusCode {
  Success = 200,
  NotFound = 404,
  ServerError = 500,
}

let status: StatusCode = StatusCode.NotFound;
console.log(status); // Väljund: 404

            

              
                Copy
              
            
          

Numbriliste enum-ite eripära on pöörd-mapping. Käituse ajal kompileeritakse numbriline enum JavaScripti objektiks, mis mapib nii nimed väärtustele kui ka väärtused nimedele.

            enum UserRole {
  Admin = 1,
  Editor,
  Viewer,
}

console.log(UserRole[1]); // Väljund: "Admin"
console.log(UserRole.Editor); // Väljund: 2
console.log(UserRole[2]); // Väljund: "Editor"

/*
Kompileerub JavaScripti:
var UserRole;
(function (UserRole) {
    UserRole[UserRole["Admin"] = 1] = "Admin";
    UserRole[UserRole["Editor"] = 2] = "Editor";
    UserRole[UserRole["Viewer"] = 3] = "Viewer";
})(UserRole || (UserRole = {}));
*/

            

              
                Copy
              
            
          

String-Enum-id

String-enum-id eelistatakse sageli nende loetavuse tõttu käituse ajal, kuna need ei tugine automaatselt kasvavatele numbritele. Iga liige tuleb initialiseerida stringi literaliga.

            enum UserPermission {
  Read = "READ_PERMISSION",
  Write = "WRITE_PERMISSION",
  Delete = "DELETE_PERMISSION",
}

let permission: UserPermission = UserPermission.Write;
console.log(permission); // Väljund: "WRITE_PERMISSION"

            

              
                Copy
              
            
          

String-enum-idel ei ole pöörd-mappingut, mis on üldiselt hea asi, et vältida ootamatut käitusaegset käitumist ja vähendada genereeritud JavaScripti väljundit.

Peamised Kaalutlused ja Võimalikud Ohud Enum-itel

Kuigi enum-id pakuvad mugavust, on neil teatud omadusi, mis nõuavad hoolikat kaalumist:

• Käitusaja Objektid: Nii numbrilised kui ka string-enum-id loovad käituse ajal JavaScripti objekte. See tähendab, et need aitavad kaasa rakenduse paketi suurusele, isegi kui neid kasutatakse ainult tüübikontrolliks. Väikeste projektide puhul võib see olla tähtsusetu, kuid suuremahulistes rakendustes, kus on palju enum-eid, võib see kokku liita.
• Tree-Shakingu Puudumine: Kuna enum-id on käitusaja objektid, ei tree-shake neid sageli kaasaegsete bundlerite nagu Webpack või Rollup poolt tõhusalt. Kui te defineerite enum-i, kuid kasutate ainult ühte või kahte selle liiget, võib kogu enum-i objekt siiski lõplikku paketti lisada. See võib viia suuremate failisuurusteni kui vajalik.
• Pöörd-Mapping (Numbrilised Enum-id): Numbriliste enum-ite pöörd-mapping funktsioon, kuigi mõnikord kasulik, võib olla ka segaduse ja ootamatu käitumise allikas. See lisab JavaScripti väljundisse täiendavat koodi ja ei pruugi alati olla soovitud funktsionaalsus. Näiteks numbriliste enum-ite serialiseerimine võib mõnikord viia ainult numbri salvestamiseni, mis ei pruugi olla nii kirjeldav kui string.
• Transpilatsiooni Ülekoormus: Enum-ite kompileerimine JavaScripti objektideks lisab ehitusprotsessile kerge ülekoormuse võrreldes lihtsalt konstantide defineerimisega.
• Piiratud Iteratsioon: Enum-väärtuste otse itereerimine võib olla mitte-triviaalselt, eriti numbriliste enum-ite puhul pöörd-mappingu tõttu. Sageli vajate abifunktsioone või spetsiifilisi tsükleid, et saada ainult soovitud väärtused.

Need punktid toovad esile, miks paljud globaalsed arendusmeeskonnad, eriti need, kes keskenduvad jõudlusele ja paketi suurusele, otsivad alternatiive, mis pakuvad sarnast tüübikindlust ilma käituse jalajäljeta või muude keerukusteta.

Alternatiiv 1: Union Type'id koos Literalsiga

Üks kõige sirgjoonelisemaid ja võimsamaid alternatiive enum-itele TypeScriptis on Union Type'id koos Stringi või Numbriga Literalsiga. See lähenemisviis kasutab TypeScripti robustset tüübisüsteemi, et määratleda spetsiifiliste, lubatud väärtuste kogum compile-time'is, ilma et see tooks käituse ajal uusi konstruktsioone.

Mis on Union Type'id?

Union type kirjeldab väärtust, mis võib olla üks mitmest tüübist. Näiteks string | number tähendab, et muutuja võib sisaldada kas stringi või numbrit. Kui kombineerida literal tüüpidega (nt "success", 404), saate määratleda tüübi, mis võib sisaldada ainult teatud eelnevalt määratletud väärtuste kogumit.

Praktiline Näide: Oleku Määratlemine Union Type'idega

Kaalume tavalist stsenaariumi: andmetöötlusülesande või kasutajakonto võimalikud olekud. Union type'idega näeb see välja puhas ja lühike:

            type JobStatus = "PENDING" | "IN_PROGRESS" | "COMPLETED" | "FAILED";

function processJob(status: JobStatus): void {
  if (status === "COMPLETED") {
    console.log("Töö lõppes edukalt.");
  } else if (status === "FAILED") {
    console.log("Tööga tekkis viga.");
  } else {
    console.log(`Töö on praegu ${status}.`);
  }
}

let currentJobStatus: JobStatus = "IN_PROGRESS";
processJob(currentJobStatus);

// See tekitaks compile-time vea:
// let invalidStatus: JobStatus = "CANCELLED"; // Viga: Tüüp '"CANCELLED"' ei ole assigneeritav tüübile 'JobStatus'.

            

              
                Copy
              
            
          

Numbriliste väärtuste puhul on muster identne:

            type HttpCode = 200 | 400 | 404 | 500;

function handleResponse(code: HttpCode): void {
  if (code === 200) {
    console.log("Toiming edukas.");
  } else if (code === 404) {
    console.log("Resurssi ei leitud.");
  }
}

let responseStatus: HttpCode = 200;
handleResponse(responseStatus);

            

              
                Copy
              
            
          

Pange tähele, kuidas me siin type aliast defineerime. See on puhtalt compile-time konstruktsioon. Kui see kompileeritakse JavaScriptiks, JobStatus lihtsalt kaob ja stringid/numbrid ise kasutatakse otse.

Union Type'ide Eelised Literalsiga

See lähenemisviis pakub mitmeid veenvaid eeliseid:

• Puhtalt Compile-Time: Union type'id kustutatakse kompileerimise ajal täielikult. Need ei genereeri käituse ajal mingit JavaScripti koodi, mis toob kaasa väiksemad paketi suurused ja kiiremad rakenduse käivitusaajad. See on oluline eelis jõudluskriitiliste rakenduste ja globaalselt juurutatavate rakenduste jaoks, kus iga kilobait loeb.
• Suurepärane Tüübikindlus: TypeScript kontrollib rangelt assigneeringuid määratletud literal tüüpide suhtes, pakkudes tugevaid garantiisid, et kasutatakse ainult kehtivaid väärtusi. See hoiab ära tüüpilised tüpoode või valesid väärtusi sisaldavad vead.
• Optimaalne Tree-Shaking: Kuna käitusaja objekti pole, toetavad union type'id loomulikult tree-shakingut. Teie bundler sisaldab ainult tegelikke stringi või numbrilisi literaleid, mida te kasutate, mitte kogu objekti.
• Loetavus: Lihtsate, erinevate väärtuste fikseeritud kogumi puhul on tüübi definitsioon sageli väga selge ja kergesti mõistetav.
• Lihtsus: Uusi keelekonstruktsioone ega keerulisi kompilatsiooni artefakte ei tutvustata. See lihtsalt kasutab TypeScripti tüüpide põhiomadusi.
• Otsene Väärtuse Juurdepääs: Te töötate otse stringi või numbri väärtustega, mis lihtsustab serialiseerimist ja deserialiseerimist, eriti API-de või andmebaasidega suheldes, mis ootavad spetsiifilisi string identifikaatoreid.

Union Type'ide Puudused Literalsiga

Kuigi võimsad, on union type'idel ka mõned piirangud:

• Kordus Seotud Andmete Jaoks: Kui teil on vaja seostada täiendavaid andmeid või metaandmeid iga "enum" liikmega (nt kuvatav silt, ikoon, värv), ei saa te seda teha otse union type definitsioonis. Tavaliselt vajate eraldi mappimisobjekti.
• Ei Otsest Iteratsiooni Kõigile Väärtustele: Käituse ajal pole sisseehitatud viisi, kuidas kõigist võimalikest väärtustest union type'ist saada. Näiteks te ei saa JobStatus-est kergesti saada ["PENDING", "IN_PROGRESS", "COMPLETED", "FAILED"]. See nõuab sageli eraldi massiivi säilitamist, kui teil on vaja neid UI-s kuvada (nt rippmenüü).
• Vähem Tsentraliseeritud: Kui väärtuste kogumit on vaja nii tüübina kui ka käitusaja väärtuste massiivina, võite leida end defineerimas loendit kaks korda (kord tüübina, kord käitusaja massiivina), mis võib põhjustada potentsiaalseid sünkroonimisest väljumisi.

Nendest puudustest hoolimata pakuvad union type'id paljudes stsenaariumides puhast, jõudlust ja tüübikindlat lahendust, mis on kooskõlas kaasaegsete JavaScripti arenduspraktikatega.

Alternatiiv 2: Const Assertionid (as const)

as const assertion, mis tutvustati TypeScript 3.4-s, on veel üks uskumatult võimas tööriist, mis pakub suurepärast alternatiivi enum-itele, eriti kui vajate käitusaja objekti ja robustset tüübi inferentseerimist. See võimaldab TypeScriptil literal-avaldiste jaoks kõige kitsama võimaliku tüübi infereerida.

Mis on Const Assertionid?

Kui rakendate as const muutuja, massiivi või objekti literalile, käsitleb TypeScript kõiki literal-i sees olevaid omadusi kui readonly ja infereerib nende literal tüübid laiade tüüpide asemel (nt "foo" asemel string, 123 asemel number). See võimaldab tuletada käitusaja andmestruktuuridest väga spetsiifilisi union type'e.

Praktiline Näide: "Pseudo-Enum" Objekti Loomine as const abil

Vaatame uuesti meie töö oleku näidet. as const abil saame määratleda ühe tõeallika oma olekute jaoks, mis toimib nii käitusaja objekti kui ka tüübi definitsioonide alusena.

            const JobStatuses = {
  PENDING: "PENDING",
  IN_PROGRESS: "IN_PROGRESS",
  COMPLETED: "COMPLETED",
  FAILED: "FAILED",
} as const;

// JobStatuses.PENDING on nüüd infereeritud kui tüüp "PENDING" (mitte lihtsalt string)
// JobStatuses on infereeritud kui tüüp {
//   readonly PENDING: "PENDING";
//   readonly IN_PROGRESS: "IN_PROGRESS";
//   readonly COMPLETED: "COMPLETED";
//   readonly FAILED: "FAILED";
// }

            

              
                Copy
              
            
          

Sel hetkel on JobStatuses käitusajal JavaScripti objekt, nagu tavaline enum. Selle tüübi inferentseerimine on aga palju täpsem.

Kombineerimine typeof ja keyof abil Union Type'ide jaoks

Tõeline võim ilmneb siis, kui kombineerime as const TypeScripti typeof ja keyof operaatoritega, et tuletada union type objekti väärtustest või võtmetest.

            const JobStatuses = {
  PENDING: "PENDING",
  IN_PROGRESS: "IN_PROGRESS",
  COMPLETED: "COMPLETED",
  FAILED: "FAILED",
} as const;

// Tüüp, mis esindab võtmeid (nt "PENDING" | "IN_PROGRESS" | ...)
type JobStatusKeys = keyof typeof JobStatuses;

// Tüüp, mis esindab väärtusi (nt "PENDING" | "IN_PROGRESS" | ...)
type JobStatusValues = typeof JobStatuses[keyof typeof JobStatuses];

function processJobWithConstAssertion(status: JobStatusValues): void {
  if (status === JobStatuses.COMPLETED) {
    console.log("Töö lõppes edukalt.");
  } else if (status === JobStatuses.FAILED) {
    console.log("Tööga tekkis viga.");
  } else {
    console.log(`Töö on praegu ${status}.`);
  }
}

let currentJobStatusFromObject: JobStatusValues = JobStatuses.IN_PROGRESS;
processJobWithConstAssertion(currentJobStatusFromObject);

// See tekitaks compile-time vea:
// let invalidStatusFromObject: JobStatusValues = "CANCELLED"; // Viga!

            

              
                Copy
              
            
          

See muster pakub mõlema maailma parimat: käitusaja objekt itereerimiseks või otse omadustele juurdepääsuks ja compile-time union type ranget tüübikontrolli jaoks.

Const Assertionite Eelised Tuletatud Union Type'idega

• Üks Tõeallikas: Defineerite oma konstandid üks kord tavalises JavaScripti objektis ja tuletate sellest nii käitusaja juurdepääsu kui ka compile-time tüübid. See vähendab oluliselt kordumist ja parandab hooldatavust erinevate arendusmeeskondade vahel.
• Tüübikindlus: Sarnaselt puhaste union type'idega saate suurepärase tüübikindluse, tagades, et kasutatakse ainult eelnevalt määratletud väärtusi.
• Itereeritavus Käitusajal: Kuna JobStatuses on tavaline JavaScripti objekt, saate seda hõlpsalt itereerida selle võtmeid või väärtusi kasutades standardseid JavaScripti meetodeid nagu Object.keys(), Object.values() või Object.entries(). See on hindamatu dünaamiliste UI-de jaoks (nt rippmenüüde täitmine) või mis tahes stseariumide jaoks, mis vajavad käitusaja loetelu.
• Seotud Andmed: See muster toetab loomulikult täiendavate andmete sidumist iga "enum" liikmega.
• Parem Tree-Shaking Potentsiaal (Võrreldes Enum-itega): Kuigi as const loob käitusaja objekti, on see tavaline JavaScripti objekt. Kaasaegsed bundlerid on üldiselt tõhusamad mittekasutatud omaduste või isegi kogu objekti tree-shakingus, kui need pole viidatud, võrreldes TypeScripti genereeritud enum-objektidega. Siiski, kui objekt on suur ja ainult väheseid omadusi kasutatakse, võib kogu objekt siiski lisada, kui see on imporditud viisil, mis takistab granulaarset tree-shakingut.
• Paindlikkus: Võite defineerida väärtusi, mis ei ole ainult stringid või numbrid, vaid keerukamad objektid vajadusel, muutes selle väga paindlikuks mustriks.

            const FileOperations = {
  UPLOAD: {
    label: "Upload File",
    icon: "upload-icon.svg",
    permission: "can_upload"
  },
  DOWNLOAD: {
    label: "Download File",
    icon: "download-icon.svg",
    permission: "can_download"
  },
  DELETE: {
    label: "Delete File",
    icon: "delete-icon.svg",
    permission: "can_delete"
  },
} as const;

type FileOperationType = keyof typeof FileOperations; // "UPLOAD" | "DOWNLOAD" | "DELETE"
type FileOperationDetail = typeof FileOperations[keyof typeof FileOperations]; // { label: string; icon: string; permission: string; }

function performOperation(opType: FileOperationType) {
  const details = FileOperations[opType];
  console.log(`Performing: ${details.label} (Permission: ${details.permission})`);
}

performOperation("UPLOAD");

            

              
                Copy
              
            
          

Const Assertionite Puudused

• Käitusaja Objekti Olemasolu: Erinevalt puhastest union type'idest loob see lähenemisviis käituse ajal siiski JavaScripti objekti. Kuigi see on tavaline objekt ja sageli parem tree-shakinguks kui TypeScripti enum-id, ei kustutata seda täielikult.
• Kerge Väljakutsuvam Tüübi Definitseerimine: Union type'i (keyof typeof ... või typeof ...[keyof typeof ...]) tuletamine nõuab natuke rohkem süntaksit kui lihtsalt literale'ite loetelu union type'i jaoks.
• Väärkasutuse Potentsiaal: Kui seda ei kasutata hoolikalt, võib väga suur as const objekt siiski märkimisväärselt paketi suurusele kaasa aidata, kui selle sisu ei tree-shake'ita tõhusalt moodulipiiride vahel.

Stsenaariumide puhul, kus vajate nii robustset compile-time tüübikontrolli kui ka käitusaja konstantide kogumit, mida saab itereerida või mis pakuvad seotud andmeid, on as const sageli eelistatud valik TypeScripti arendajate hulgas üle maailma.

Alternatiivide Võrdlus: Millal Mida Kasutada?

Union type'ide ja const assertionite vahel valimine sõltub suuresti teie konkreetsetest nõuetest seoses käitusaja olemasolu, itereeritavuse ja vajadusega seostada täiendavaid andmeid oma konstantidega. Jaotame otsustusfaktorid.

Lihtsus vs. Robustsus

• Union Type'id: Pakuvad ülimat lihtsust, kui vajate ainult tüübiga kindlat eristuvate stringi või numbriliste väärtuste kogumit compile-time'is. Need on kõige kergem valik.
• Const Assertionid: Pakuvad robustsemat mustrit, kui vajate nii compile-time tüübikindlust kui ka käitusaja objekti, mida saab päringuid teha, itereerida või laiendada täiendava metaandmetega. Esmane seadistus on veidi väljakutsuvam, kuid see tasub end funktsioonide osas.

Käitusaja vs. Compile-time Olemasolu

• Union Type'id: On puhtalt compile-time konstruktsioonid. Need ei genereeri absoluutselt mingit JavaScripti koodi. See on ideaalne rakenduste jaoks, kus paketi suuruse minimeerimine on esmatähtis ja väärtused ise on piisavad, ilma et neid oleks vaja käitusajal objektina kasutada.
• Const Assertionid: Loovad käitusajal JavaScripti objekti. See objekt on teie JavaScripti koodis juurdepääsetav ja kasutatav. Kuigi see lisab paketi suurusele, on see üldiselt tõhusam kui TypeScripti enum-id ja paremad kandidaadid tree-shakinguks.

Itereerimise Nõuded

• Union Type'id: Ei paku otsest viisi, kuidas käitusajal kõigist võimalikest väärtustest itereerida. Kui peate täitma rippmenüü või kuvama kõik valikud, peate defineerima eraldi massiivi nende väärtustest, mis võib põhjustada kordusi.
• Const Assertionid: Selles valdkonnas paistavad silma. Kuna töötate tavalise JavaScripti objektiga, saate hõlpsalt kasutada Object.keys(), Object.values() või Object.entries(), et saada võtmete, väärtuste või võtme-väärtuse paaride massiiv, vastavalt. See muudab need ideaalseks dünaamiliste UI-de või mis tahes stsenaariumide jaoks, mis nõuavad käitusaja loetelu.

            const PaymentMethods = {
  CREDIT_CARD: "Credit Card",
  PAYPAL: "PayPal",
  BANK_TRANSFER: "Bank Transfer",
} as const;

type PaymentMethodType = keyof typeof PaymentMethods;

// Hankige kõik võtmed (nt sisemise loogika jaoks)
const methodKeys = Object.keys(PaymentMethods) as PaymentMethodType[];
console.log(methodKeys); // ["CREDIT_CARD", "PAYPAL", "BANK_TRANSFER"]

// Hankige kõik väärtused (nt rippmenüüs kuvamiseks)
const methodLabels = Object.values(PaymentMethods);
console.log(methodLabels); // ["Credit Card", "PayPal", "Bank Transfer"]

// Hankige võtme-väärtuse paarid (nt mappimiseks)
const methodEntries = Object.entries(PaymentMethods);
console.log(methodEntries); // [["CREDIT_CARD", "Credit Card"], ...]

            

              
                Copy
              
            
          

Tree-Shakingu Mõjud

• Union Type'id: On loomulikult tree-shake'itavad, kuna need on ainult compile-time.
• Const Assertionid: Kuigi nad loovad käitusaja objekti, suudavad kaasaegsed bundlerid sageli selle objekti mittekasutatud omadusi tõhusamalt tree-shake'ida kui TypeScripti genereeritud enum-objektidega. Siiski, kui kogu objekt on imporditud ja sellele viidatakse, lisatakse see tõenäoliselt. Hoolikas mooduli disain aitab.

Parimad Praktikad ja Hübriidlähenemisviisid

See ei ole alati "kas üks või teine" olukord. Sageli on parim lahendus hübriidlähenemisviis, eriti suurtes, rahvusvahelistatud rakendustes:

• Lihtsate, puhtalt sisemiste lippude või identifikaatorite jaoks, mida kunagi ei pea itereerima ega millel pole seotud andmeid, on Union Type'id üldiselt kõige tõhusam ja puhtaim valik.
• Konstantide kogumite jaoks, mida tuleb itereerida, UI-des kuvada või millel on rikkalikult seotud metaandmeid (nagu sildid, ikoonid või õigused), on Const Assertionite muster parem.
• Kombineerimine Loetavuse ja Lokaliseerimise jaoks: Paljud meeskonnad kasutavad sisemiste identifikaatorite jaoks as const ja tuletavad seejärel lokaliseeritud kuvatavad sildid eraldi rahvusvahelistamise (i18n) süsteemist.

            // src/constants/order-status.ts
const OrderStatuses = {
  PENDING: "PENDING",
  PROCESSING: "PROCESSING",
  SHIPPED: "SHIPPED",
  DELIVERED: "DELIVERED",
  CANCELLED: "CANCELLED",
} as const;

type OrderStatus = typeof OrderStatuses[keyof typeof OrderStatuses];

export { OrderStatuses, type OrderStatus };

// src/i18n/en.json
{
  "orderStatus": {
    "PENDING": "Pending Confirmation",
    "PROCESSING": "Processing Order",
    "SHIPPED": "Shipped",
    "DELIVERED": "Delivered",
    "CANCELLED": "Cancelled"
  }
}

// src/components/OrderStatusDisplay.tsx
import { OrderStatuses, type OrderStatus } from "../constants/order-status";
import { useTranslation } from "react-i18next"; // Näide i18n raamatukogust

interface OrderStatusDisplayProps {
  status: OrderStatus;
}

function OrderStatusDisplay({ status }: OrderStatusDisplayProps) {
  const { t } = useTranslation();
  const displayLabel = t(`orderStatus.${status}`);
  return <span>Status: {displayLabel}</span>;
}

// Kasutus:
// <OrderStatusDisplay status={OrderStatuses.DELIVERED} />

            

              
                Copy
              
            
          

See hübriidlähenemisviis kasutab as const tüübikindlust ja käitusaja itereeritavust, samal ajal kui hoiab lokaliseeritud kuvatavad stringid eraldi ja hallatavana, mis on globaalsete rakenduste jaoks kriitilise tähtsusega.

Täpsemad Mustrid ja Kaalutlused

Lisaks põhikäibele saab nii union type'e kui ka const assertionid integreerida keerukamatesse mustritesse, et veelgi parandada koodi kvaliteeti ja hooldatavust.

Type Guardide Kasutamine Union Type'idega

Union type'idega töötades, eriti kui union sisaldab erinevaid tüüpe (mitte ainult literale'eid), muutuvad type guardid tüüpide kitsendamiseks hädavajalikuks. Literal union type'idega pakuvad diskrimineeritud unionid tohutut jõudu.

            type SuccessEvent = { type: "SUCCESS"; data: any; };
type ErrorEvent = { type: "ERROR"; message: string; code: number; };

type SystemEvent = SuccessEvent | ErrorEvent;

function handleSystemEvent(event: SystemEvent) {
  if (event.type === "SUCCESS") {
    console.log("Andmed saadud:", event.data);
    // event on nüüd kitsendatud SuccessEvent'iks
  } else {
    console.log("Tekkis viga:", event.message, "Kood:", event.code);
    // event on nüüd kitsendatud ErrorEvent'iks
  }
}

handleSystemEvent({ type: "SUCCESS", data: { user: "Alice" } });
handleSystemEvent({ type: "ERROR", message: "Network failure", code: 503 });

            

              
                Copy
              
            
          

See muster, mida sageli nimetatakse "diskrimineeritud unioniks", on uskumatult robustne ja tüübikindlusega, pakkudes compile-time garantiisid andmete struktuuri kohta, mis põhinevad ühisel literal omadusel (diskriminaator).

Object.values() koos as const ja Type Assertionitega

Kui kasutate as const mustrit, võib Object.values() olla väga kasulik. Kuid TypeScripti vaikimisi inferentseerimine Object.values() jaoks võib olla laiem kui soovitud (nt string[] asemel spetsiifiline union literale'idest). Võimalikult ranguse saavutamiseks võite vajada type assertionit.

            const Statuses = {
  ACTIVE: "Active",
  INACTIVE: "Inactive",
  PENDING: "Pending",
} as const;

type StatusValue = typeof Statuses[keyof typeof Statuses]; // "Active" | "Inactive" | "Pending"

// Object.values(Statuses) on infereeritud kui (string | "Active" | "Inactive" | "Pending")[]
// Saame seda vajadusel kitsendada:
const allStatusValues: StatusValue[] = Object.values(Statuses);

console.log(allStatusValues); // ["Active", "Inactive", "Pending"]

// Rippmenüü jaoks võite paarida väärtused siltidega, kui need erinevad
const statusOptions = Object.entries(Statuses).map(([key, value]) => ({
  value: key, // Kasutage tegeliku identifikaatorina võtit
  label: value // Kasutage kuvatava sildina väärtust
}));
console.log(statusOptions);
/*
[
  { value: "ACTIVE", label: "Active" },
  { value: "INACTIVE", label: "Inactive" },
  { value: "PENDING", label: "Pending" }
]
*/

            

              
                Copy
              
            
          

See demonstreerib, kuidas saada tugevalt tüübitud väärtuste massiiv, mis sobib UI elementide jaoks, säilitades samal ajal literal tüübid.

Rahvusvahelistamine (i18n) ja Lokaliseeritud Sildid

Globaalsete rakenduste jaoks on lokaliseeritud stringide haldamine esmatähtis. Kuigi TypeScripti enum-id ja nende alternatiivid pakuvad sisemisi identifikaatoreid, vajavad kuvatavad sildid sageli i18n jaoks eraldamist. as const muster täiendab i18n süsteeme kaunilt.

Te defineerite oma sisemised, muutumatud identifikaatorid as const abil. Need identifikaatorid on kõigi lokalsete jaoks ühtsed ja toimivad teie tõlketoodete võtmetena. Tegelikud kuvatavad stringid laaditakse seejärel i18n raamatukogust (nt react-i18next, vue-i18n, FormatJS) kasutaja valitud keele põhjal.

            // app/features/product/constants.ts
export const ProductCategories = {
  ELECTRONICS: "ELECTRONICS",
  APPAREL: "APPAREL",
  HOME_GOODS: "HOME_GOODS",
  BOOKS: "BOOKS",
} as const;

export type ProductCategory = typeof ProductCategories[keyof typeof ProductCategories];

// app/i18n/locales/en.json
{
  "productCategories": {
    "ELECTRONICS": "Electronics",
    "APPAREL": "Apparel & Accessories",
    "HOME_GOODS": "Home Goods",
    "BOOKS": "Books"
  }
}

// app/i18n/locales/es.json
{
  "productCategories": {
    "ELECTRONICS": "Electrónica",
    "APPAREL": "Ropa y Accesorios",
    "HOME_GOODS": "Artículos para el hogar",
    "BOOKS": "Libros"
  }
}

// app/components/ProductCategorySelector.tsx
import { ProductCategories, type ProductCategory } from "../features/product/constants";
import { useTranslation } from "react-i18next";

function ProductCategorySelector() {
  const { t } = useTranslation();

  return (
    <select>
      {Object.values(ProductCategories).map(categoryKey => (
        <option key={categoryKey} value={categoryKey}>
          {t(`productCategories.${categoryKey}`)}
        </option>
      ))}
    </select>
  );
}

            

              
                Copy
              
            
          

See vastutusala eraldamine on skaleeritavate, globaalsete rakenduste jaoks kriitiline. TypeScripti tüübid tagavad, et kasutate alati kehtivaid võtmeid ja i18n süsteem hoolitseb kasutaja lokaadi põhjal esitluskihi eest. See väldib keelesõltuvate stringide otse oma peamise rakenduse loogika sisse manustamist, mis on levinud rahvusvaheliste meeskondade jaoks levinud anti-muster.

Kokkuvõte: Oma TypeScripti Disainivalikute Täiustamine

Kuna TypeScript jätkuvalt areneb ja annab arendajatele üle maailma võimaluse luua robustsemaid ja skaleeritavamaid rakendusi, muutub selle nüansirikka funktsioonide ja alternatiivide mõistmine üha olulisemaks. Kuigi TypeScripti enum märksõna pakub mugavat viisi nimetatud konstantide defineerimiseks, muudavad selle käitusaja jalajälg, tree-shakingu piirangud ja pöörd-mappingu keerukused sageli kaasaegsed alternatiivid jõudlusest teadlike või suuremahuliste projektide jaoks atraktiivsemaks.

Union Type'id koos Stringi/Numbriga Literalsiga paistavad silma kõige kergema ja kõige compile-time-kesksema lahendusena. Need pakuvad kompromissitu tüübikindlust ilma käituse ajal JavaScripti genereerimata, muutes need ideaalseks stsenaariumide jaoks, kus minimaalne paketi suurus ja maksimaalne tree-shaking on prioriteedid ning käitusaja loetelu pole probleem.

Teisest küljest pakuvad Const Assertionid (as const) koos typeof ja keyof väga paindlikku ja võimsat mustrit. Need pakuvad ühte tõeallikat teie konstantidele, tugevat compile-time tüübikindlust ja kriitilist võimet itereerida väärtusi käitusajal. See lähenemisviis sobib eriti hästi olukordadesse, kus peate oma konstantidele siduma täiendavaid andmeid, täitma dünaamilisi UI-sid või integreeruma sujuvalt rahvusvahelistamise süsteemidega.

Kaaludes hoolikalt kompromisse – käitusaja jalajälg, itereerimisvajadused ja seotud andmete keerukus – saate teha teadlikke otsuseid, mis viivad puhtama, tõhusama ja hooldatavama TypeScripti koodini. Nende alternatiivide kasutuselevõtt ei ole ainult "moodsa" TypeScripti kirjutamine; see on teadlike arhitektuuriliste valikute tegemine, mis parandavad teie rakenduse jõudlust, arendaja kogemust ja pikaajalist jätkusuutlikkust globaalse publiku jaoks.

Täiustage oma TypeScripti arendust, valides õige tööriista õige töö jaoks, liikudes vaikimisi enum-ist kaugemale, kui paremad alternatiivid olemas on.